<template>
  <div class="container">
    <ul v-if="list.length">
      <li
        v-for="(item,index) in list"
        :key="index"
        :class="{'active':item.status==3,'end':item.status==1}"
      >
        <div
          class="title"
          v-if="index%2==0"
          :class="{'active':item.status==3,'end':item.status==1,'liang':get(index)==1}"
        >{{item.nongli}}</div>
        <div class="item end" v-if="item.status==1">
          <div class="time">{{item.answer_point}}场</div>
          <div class="btns" @click="goHistory(item.topic_id)">历史题目</div>
          <div class="status" @click="goTop(item.topic_id)"></div>
          <div class="start">{{item.status_show}}</div>
        </div>
        <div class="item" v-if="item.status==2">
          <div class="time">{{item.answer_point}}场</div>
          <div class="start">{{item.status_show}}</div>
        </div>
        <div class="starting" v-if="item.status==3">
          <div class="time">{{item.answer_point}}场</div>
          <div class="min">
            <span>{{m}}</span>分
            <span>{{s}}</span>秒
          </div>
          <div class="start">{{item.status_show}}</div>
        </div>
      </li>
    </ul>
    <!-- <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>-->
    <div class="btn-group">
      <div class="btns" @click="goMy">我的答题</div>
      <div class="btn" @click="goQuestion" :class="{'end':rule==1||text=='即将开始'}">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rule: "",
      list: [],
      text: "",
      time: "29分30秒",
      m: "",
      s: "",
      rules: ""
    };
  },
  mounted() {
    if (localStorage.rules != undefined) {
      this.rules = JSON.parse(localStorage.rules);
    }
    this.getLists();
  },
  methods: {
    goHistory(id) {
      this.$router.push({
        path: "/questionHistory",
        query: {
          id: id
        }
      });
    },
    //前往top30
    goTop(id) {
      this.$router.push({ path: "/top", query: { id: id } });
    },
    //前往我的答题
    goMy() {
      this.$router.push({
        path: "/myQuestion"
      });
    },
    get(index) {
      if (index <= 11) {
        if (index % 2 == 0 && this.list[index + 1].status != 1) {
          return 1;
        } else {
          return 0;
        }
      }
      return 0;
    },
    getLists() {
      var that = this;
      this.$api.getLists().then(res => {
        if (res.status == 1) {
          this.rule = res.data.button_status;
          this.list = res.data.list;
          this.text = res.data.button_show;
          var index = 0;
          for (var i = 0; i < this.list.length; i++) {
            //进行中，获取倒计时
            if (this.list[i].status == 3) {
              var str = (
                this.list[i].t_date +
                " " +
                this.list[i].answer_point
              ).replace(new RegExp("-", "gm"), "/");
              index = i;

              that.getDate(str);
            }
          }
          if (index > 0) {
            this.text = this.list[index].button_show;
          }
        }
      });
    },
    getDate(str) {
      var that = this;
      this.$api.getRules().then(res => {
        if (res.status == 1) {
          this.rules = res.data;
          var nowDate = this.rules.now_time.replace(new RegExp("-", "gm"), "/");
          var add_time = new Date(str).getTime();
          var end_time = new Date(nowDate).getTime();

          var minutes = parseInt(
            ((end_time - add_time) % (1000 * 60 * 60)) / (1000 * 60)
          );
          var hours = parseInt(
            ((end_time - add_time) % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          var seconds = parseInt(((end_time - add_time) % (1000 * 60)) / 1000);

          that.m = that.rules.answer_time - minutes - hours * 60;
          that.s = 60 - seconds;
          that.add();
        }
      });
    },
    add() {
      var _this = this;
      var time = window.setInterval(function() {
        if (_this.s === 0 && _this.m !== 0) {
          _this.s = 59;
          _this.m -= 1;
        } else if (_this.m === 0 && _this.s === 0) {
          _this.s = 0;
          _this.getLists();
          clearInterval(time);
        } else {
          _this.s -= 1;
        }
      }, 1000);
    },
    goQuestion() {
      if (this.rule == 1) {
        return false;
      } else {
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].status == 3) {
            var id = this.list[i].topic_id;
            this.$router.push({
              path: "/questionA",
              query: {
                id: id,
                t_date: this.list[i].t_date,
                answer_point: this.list[i].answer_point
              }
            });
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  // width: 100%;
  min-height: 100vh;
  background: url(../.././img/yue/22.png) no-repeat #c0292c;
  background-size: cover;
  padding: 40px 10px 80px;
  overflow: hidden;
  ul {
    list-style: none;
    li {
      width: 100%;
      height: 48px;
      line-height: 48px;
      background: url(../.././img/yue/bg.png) no-repeat;
      background-size: cover;
      display: flex;
      position: relative;
      padding: 0 10px;
      &:nth-child(odd) {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
      }
      &:nth-child(even) {
        border-top: 1px solid #a6a6a6;
        margin-bottom: 30px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      &.end {
        color: #a39d98;
      }
      &.active {
        background: url(../.././img/yue/bg2.png) no-repeat;
        .starting {
          display: flex;
          font-size: 15px;
          flex: 1;
          .start {
            color: #53d91e;
          }
          .min {
            flex: 1;
            text-align: center;
            span {
              color: #ff0101;
              font-size: 15px;
              font-weight: bold;
            }
          }
        }
      }
      .item {
        flex: 1;
        display: flex;
        color: #aaaaaa;
        font-size: 15px;
        .start {
          flex: 1;
          text-align: center;
        }
        &.end {
          .start {
            width: 80px;
            text-align: center;
            flex: initial;
          }
          .btns {
            flex: 1;
            text-align: center;
            color: #cd7a37;
            font-size: 15px;
            white-space: nowrap;
          }
          .status {
            width: 40px;
            height: 100%;
            background: url(../.././img/yue/12.png) no-repeat left center;
            background-size: contain;
            margin-right: 15px;
            display: inline-block;
            flex: initial;
          }
        }
      }
      .title {
        position: absolute;
        top: -20px;
        left: 20px;
        width: 73px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 15px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 4px 0px rgba(162, 162, 162, 0.3);
        color: #000000;
        &.end {
          color: #fff;
          background: rgba(193, 193, 193, 1);
          box-shadow: 0px 3px 4px 0px rgba(162, 162, 162, 0.3);
        }
        &.liang {
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 3px 4px 0px rgba(162, 162, 162, 0.3);
          color: #000000;
        }
      }
    }
  }
  .btn-group {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #c0292c;
    width: 100%;
    padding: 20px 0px;
    .btns {
      width: 136px;
      height: 48px;
      background: rgba(255, 255, 255, 1);
      border-radius: 24px;
      text-align: center;
      line-height: 48px;
      margin: 0 14px;
      font-weight: bold;
      font-size: 18px;
      cursor: pointer;
    }
    .btn {
      width: 190px;
      height: 48px;
      line-height: 48px;
      background: rgba(249, 227, 203, 1);
      border-radius: 24px;
      color: #9d100f;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      cursor: pointer;
      &.end {
        background: #e3e3e3;
        color: #8b8b8b;
      }
    }
  }
}
</style>